<template>
	<view class="padding-30">
		<view class="padding-30 bg-fff border-radius20 margin-bottom30">
			<view class="flex-alignItems-center margin-bottom30">
				<view class="fontSize-18 color-000 margin-right10">请选择大便形态</view>
				<view class="fontSize-15 color-999">下拉页面可查看形态说明</view>
			</view>
			<view class="padding-30 border-radius20 margin-bottom30 choose-stool-view" v-for="(item,index) in stoolMorphology" :key="index"
			:class="item.isSelect?'choose-stool-view1':''" @click="chooseStoolItem(item)">
				<view class="flex-alignItems-center margin-right20">
					<view class="margin-right20">
						<image class="img-44" v-if="item.isSelect" src="../../../../static/image/checked1.png" mode=""></image>
						<image class="img-44" v-else src="../../../../static/image/check.png" mode=""></image>
					</view>
					<view class="fontSize-15">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="padding-30 bg-fff border-radius20 margin-bottom30">
			<view class="flex-alignItems-center margin-bottom30">
				<view class="fontSize-18 color-000 margin-right10">请选择大便形态发生时间</view>
			</view>
			<view class="padding-30 border-radius20 margin-bottom30 choose-stool-view" @click="ChooseItemDate(1)"
			:class="isDate ==1?'choose-stool-view1':''">
				<view class="flex-alignItems-center margin-right20">
					<view class="margin-right20">
						<image class="img-44" v-if="isDate == 1" src="../../../../static/image/checked1.png" mode=""></image>
						<image class="img-44" v-else src="../../../../static/image/check.png" mode=""></image>
					</view>
					<view class="fontSize-15">1.三个月内</view>
				</view>
			</view>
			<view class="padding-30 border-radius20 margin-bottom30 choose-stool-view" @click="ChooseItemDate(2)"
			:class="isDate ==2?'choose-stool-view1':''">
				<view class="flex-alignItems-center margin-right20">
					<view class="margin-right20">
						<image class="img-44" v-if="isDate ==2" src="../../../../static/image/checked1.png" mode=""></image>
						<image class="img-44" v-else src="../../../../static/image/check.png" mode=""></image>
					</view>
					<view class="fontSize-15">2.近半年</view>
				</view>
			</view>
		</view>
		<view class="padding-30 bg-fff border-radius20">
			<view class="fontSize-15 color-000">便便形态说明图</view>
			<image class="stool-image" :src="stoolImage" mode=""></image>
		</view>
		
		<!-- 底部操作栏 -->
		<view style="height: 200rpx;"></view>
		<view class="position-fixed-bottom padding-30 bg-fff">
			<view class="btn50-0165FD-15ffffff flex-center" @click="SubmitEvent">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				stoolMorphology:[],
				stoolImage:'',
				isSelectList:[],
				isDate:0
			}
		},
		onLoad() {
			this.getConfig()
		},
		methods:{
			// 提交
			SubmitEvent(){
				
			},
			ChooseItemDate(value){
				this.isDate = value
			},
			// 选择大便形状
			chooseStoolItem(item){
				let i = this.isSelectList.indexOf(item.name)
				if (i > -1) {
					item.isSelect = false
					this.isSelectList = []
				}else{
					// 如果没选中 添加选择数组，选择状态改为选择
					this.stoolMorphology.forEach(item1=>{
						item1.isSelect = false
					})
					this.isSelectList.push(item)
					item.isSelect = true
				}
				console.log(this.isSelectList)
			},
			// 获取配置信息
			async getConfig() {
				let res = await this.$http.post(this.$api.config, {}, {
					token: true
				})
				if(res.code == 1){
					let arr = []
					arr = res.data.大便形态.split(',')
					this.stoolMorphology = arr.map(item=>{
						return {
							name:item,
							isSelect:false
						}
					})
					this.stoolImage = res.data.大便说明图
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.stool-image{
		width: 100%;
		height: 400rpx;
		flex-shrink: 0;
	}
	.choose-stool-view1{
		color: #ffffff !important;
		background-color: #64A0FB !important;
	}
	.choose-stool-view{
		background-color: #F3F8FF;
	}
</style>